<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .operation-container {
            margin-bottom: 10px;
        }
        .user-type-badge {
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 12px;
        }
        .job-seeker {
            background-color: #e8f4ff;
            color: #1e9fff;
        }
        .recruiter {
            background-color: #f0f9eb;
            color: #67c23a;
        }
        .action-btn-container {
            display: flex;
            gap: 5px;
        }
        .action-btn-container .layui-btn {
            flex: 1;
        }
    </style>
</head>
<body>
<div class="main-wrapper">
    <div class="content-container">
        <div class="layui-card-header">用户管理</div>
        <div class="layui-card-body">
            <!-- 搜索区域 -->
            <div class="operation-container">
                <form class="layui-form" id="searchForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" placeholder="请输入用户名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">真实姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="realName" placeholder="请输入真实姓名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">电话</label>
                            <div class="layui-input-inline">
                                <input type="text" name="phone" placeholder="请输入电话" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline">
                                <select name="gender">
                                    <option value="">全部</option>
                                    <option value="M">男</option>
                                    <option value="F">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">用户类型</label>
                            <div class="layui-input-inline">
                                <select name="userType">
                                    <option value="">全部</option>
                                    <option value="false">求职者</option>
                                    <option value="true">招聘者</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn" lay-submit lay-filter="searchBtn">
                                <i class="layui-icon layui-icon-search"></i>搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">
                                <i class="layui-icon layui-icon-refresh"></i>重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <!-- 表格区域 -->
            <table id="userTable" lay-filter="userTable"></table>
        </div>
    </div>
</div>

<!-- 用户详情弹窗 -->
<div id="detailDialog" style="display: none; padding: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">头像：</label>
        <div class="layui-input-block">
            <img id="detailAvatar" src="">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" id="detailUsername" readonly class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" id="detailEmail" readonly class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">真实姓名</label>
        <div class="layui-input-block">
            <input type="text" id="detailRealName" readonly class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-block">
            <input type="text" id="detailPhone" readonly class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="text" id="detailGender" readonly class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户类型</label>
        <div class="layui-input-block">
            <input type="text" id="detailUserType" readonly class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item" id="detailCompanyField" style="display: none;">
        <label class="layui-form-label">企业名称</label>
        <div class="layui-input-block">
            <input type="text" id="detailCompany" readonly class="layui-input layui-disabled">
        </div>
    </div>
</div>

<!-- 企业详情弹窗 -->
<div id="companyDialog" style="display: none; padding: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">企业名称</label>
        <div class="layui-input-block">
            <input type="text" id="companyName" readonly class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">企业类型</label>
        <div class="layui-input-block">
            <input type="text" id="companyType" readonly class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">法定代表人</label>
        <div class="layui-input-block">
            <input type="text" id="legalPerson" readonly class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">企业地址</label>
        <div class="layui-input-block">
            <input type="text" id="companyAddress" readonly class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">企业状态</label>
        <div class="layui-input-block">
            <input type="text" id="companyStatus" readonly class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">成立时间</label>
        <div class="layui-input-block">
            <input type="text" id="establishTime" readonly class="layui-input layui-disabled">
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableOperation">
    <div class="action-btn-container">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
        {{# if(d.userType === false){ }}
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="downloadResume">下载简历</a>
        {{# } else if(d.userType === true){ }}
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="viewCompany">查看企业</a>
        {{# } }}
    </div>
</script>

<script src="/layui/layui.js"></script>
<script th:inline="none">
    layui.use(['table', 'form', 'layer', 'jquery'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;

        // 初始化表格
        var tableIns = table.render({
            elem: '#userTable',
            url: '/api/account/getAllUser',
            method: 'post',
            page: true,
            response: {
                statusName: 'code',
                statusCode: 200,
                countName: 'count',
                dataName: 'data'
            },
            cols: [[
                {type: 'checkbox', fixed: 'left', width: 50},
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'info.username', title: '用户名', width: 150, templet: function (d) {
                        return (d.info?.username === null ? '未知' : d.info?.username);
                    }},
                {field: 'info.email', title: '邮箱', width: 200, templet: function (d) {
                        return (d.info?.email === null ? '未知' : d.info?.email);
                    }},
                {field: 'info.phone', title: '电话', width: 150, templet: function (d) {
                        return (d.info?.phone === null ? '未知' : d.info?.phone);
                    }},
                {field: 'info.realName', title: '真实姓名', width: 150, templet: function (d) {
                        return (d.info?.realName === null ? '未知' : d.info?.realName);
                    }},
                {field: 'info.gender', title: '性别', width: 80, templet: function (d) {
                        return (d.info?.gender === 'M' ? '男' : (d.info?.gender === 'F' ? '女' : '未知'))
                    }},
                {field: 'userType', title: '用户类型', width: 120, templet: function(d){
                        return d.userType ?
                            '<span class="user-type-badge recruiter">招聘者</span>' :
                            '<span class="user-type-badge job-seeker">求职者</span>';
                    }},
                {field: 'info.createTime', title: '创建时间', width: 200, templet: function(d){
                        return new Date(d.info.createTime).toLocaleString();
                    }},
                {fixed: 'right', title: '操作', width: 180, align: 'center', toolbar: '#tableOperation'}
            ]],
            initSort: {
                field: 'id',
                type: 'asc'
            }
        });

        // 搜索按钮点击事件
        form.on('submit(searchBtn)', function (data) {
            // 获取表单数据
            var searchParams = {
                username: data.field.username || null,
                realName: data.field.realName || null,
                phone: data.field.phone || null,
                gender: data.field.gender || null,
                userType: data.field.userType || null
            };

            // 重载表格数据
            tableIns.reload({
                where: searchParams,
                page: {curr: 1}
            });
            return false;
        });

        // 监听用户类型变化
        $('#userTypeSelect').on('change', function() {
            var userType = $(this).val();
            if(userType === "false") {
                $('#companyField').hide();
            } else if(userType === "true") {
                $('#companyField').show();
                loadCompanies();
            } else {
                $('#companyField').hide();
            }
            form.render();
        });

        // 加载企业列表
        function loadCompanies() {
            $.ajax({
                url: '/api/company/getAll',
                type: 'post',
                success: function (res) {
                    if (res.code === 200) {
                        var options = '<option value="">请选择企业</option>';
                        $.each(res.data, function(i, company) {
                            options += '<option value="' + company.id + '">' + company.companyName + '</option>';
                        });
                        $('#companySelect').html(options);
                        form.render('select');
                    } else {
                        layer.msg('加载企业列表失败');
                    }
                },
                error: function () {
                    layer.msg('加载企业列表失败');
                }
            });
        }

        // 表格工具栏事件
        table.on('tool(userTable)', function (obj) {
            var data = obj.data;

            if (obj.event === 'detail') {
                // 显示用户详情
                $('#detailAvatar').attr('src', `data:image/png;base64,${data.avatarBase64}`);
                $('#detailUsername').val(data.info.username);
                $('#detailEmail').val(data.info.email);
                $('#detailRealName').val(data.info.realName);
                $('#detailPhone').val(data.info.phone);
                $('#detailGender').val(data.info.gender);
                $('#detailUserType').val(data.userType ? '招聘者' : '求职者');

                // 处理企业信息
                if(data.userType && data.company) {
                    $('#detailCompanyField').show();
                    $('#detailCompany').val(data.company.companyName);
                } else {
                    $('#detailCompanyField').hide();
                }

                layer.open({
                    title: '用户详情',
                    type: 1,
                    area: ['600px', '450px'],
                    content: $('#detailDialog')
                });
            }
            else if (obj.event === 'delete') {
                layer.confirm('确定要删除该用户吗？', function (index) {
                    $.ajax({
                        url: '/api/account/deleteUser/' + data.id,
                        type: 'delete',
                        success: function (res) {
                            if (res.code === 200) {
                                layer.msg('删除成功');
                                tableIns.reload();
                            } else {
                                layer.msg(res.msg || '删除失败');
                            }
                        },
                        error: function () {
                            layer.msg('删除失败');
                        }
                    });
                    layer.close(index);
                });
            }
            else if (obj.event === 'downloadResume') {
                // 下载简历
                if(data.resumeHash) {
                    window.open('/api/account/downloadResume/' + data.id);
                } else {
                    layer.msg('该用户没有上传简历');
                }
            }
            else if (obj.event === 'viewCompany') {
                // 查看企业详情
                if(data.company) {
                    $('#companyName').val(data.company.companyName);
                    $('#companyType').val(data.company.companyType);
                    $('#legalPerson').val(data.company.legalPerson);
                    $('#companyAddress').val(data.company.companyAddress);
                    $('#companyStatus').val(data.company.companyStatus);
                    $('#establishTime').val(new Date(data.company.establishTime).toLocaleDateString());

                    layer.open({
                        title: '企业详情 - ' + data.company.companyName,
                        type: 1,
                        area: ['600px', '450px'],
                        content: $('#companyDialog')
                    });
                } else {
                    layer.msg('该用户没有关联企业');
                }
            }
        });
    });
</script>
</body>
</html>